<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LinkHunter - 链接猎手</title>
  <link rel="stylesheet" href="popup.css">
</head>
<body>
  <div class="container">
    <header class="header">
      <div class="header-top">
        <h1>🎯 LinkHunter</h1>
        <div class="header-controls">
          <button id="themeBtn" class="theme-btn" title="切换主题">🌙</button>
          <button id="exportBtn" class="export-btn" title="导出收藏夹">📤</button>
        </div>
      </div>
      <button id="syncBtn" class="sync-btn">
        <span class="sync-icon">🔄</span>
        同步收藏夹
      </button>
    </header>
    
    <div class="search-section">
      <div class="search-box">
        <input type="text" id="searchInput" placeholder="搜索收藏的网站..." />
        <button id="clearSearch" class="clear-btn">✕</button>
      </div>
      <div class="filter-section">
        <div class="tag-filters-container">
          <div class="tag-filters" id="tagFilters">
            <button class="tag-filter active" data-tag="all">全部</button>
          </div>
          <button class="tag-toggle-btn" id="tagToggleBtn" style="display: none;">
            <span class="toggle-text">展开更多</span>
            <span class="toggle-icon">▼</span>
          </button>
        </div>
      </div>
    </div>
    
    <div class="stats">
      <span id="bookmarkCount">共 0 个收藏</span>
      <span id="lastSync">未同步</span>
      <span id="filteredCount" style="display: none;"></span>
    </div>
    
    <div class="bookmark-list" id="bookmarkList">
      <div class="empty-state">
        <div class="empty-icon">📖</div>
        <p>还没有收藏夹数据</p>
        <p class="empty-hint">点击上方"同步收藏夹"按钮开始</p>
      </div>
    </div>
    
    <div class="loading" id="loading" style="display: none;">
      <div class="spinner"></div>
      <p>正在同步收藏夹...</p>
    </div>
  </div>
  
  <script src="popup.js"></script>
</body>
</html>